<template>
	<view>
		<!-- 定位 -->
		<view class="search_view">
			<image src="../../../static/coen/location.png" mode="widthFix"></image>
			<text class="search_text">阿里巴巴淘宝商城</text>
			<text>></text>
		</view>
		<!-- 搜索 -->
		<view class="search_cont" @click="search()">
			<view class="search">
				<image src="../../../static/coen/search.png" mode="widthFix" class="search_img"></image>
				<input type="text" placeholder="麻辣烫" disabled="disabled" />
			</view>
		</view>
		<!-- 自定义轮播 -->
		<view class="swiper_view">
			 <swiper :autoplay="false" :interval="2000" :duration="1000" @change="bannerfun">
				<block v-for="(item,index) in lable" :key="index">
					<swiper-item>
						<view class="swiper_item">
							<block v-for="(listdata,index) in item" :key="index">
								<view class="contenting_img">
									<image class="uploadimg" :src="listdata.img" mode="widthFix" style="width: 50upx;height: 50upx;"></image>
									<text>{{listdata.title}}</text>					
								</view>
							</block>
						</view>						
					</swiper-item>	
				</block>
			 </swiper>
			 <!-- 指示点 -->
			 <view class="instruct_view">
				 <block v-for="(item,index) in instructdata" :key="index">
					 <view class="instruct" :class="{active:index==num}">{{item}}</view>
				 </block>
			 </view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				num:0,
				//面板指示点
				instructdata:['',''],
				//轮播数组
				lable:[
					[
						{
							'img':'../../../static/insert/meishi.png',
							'title':'美食'
						},
						{
							'img':'../../../static/insert/chaoshi.png',
							'title':'超市便利'
						},
						{
							'img':'../../../static/insert/shuiguo.png',
							'title':'蔬菜水果'
						},
						{
							'img':'../../../static/insert/meituan.png',
							'title':'美团专送'
						},
						{
							'img':'../../../static/insert/daigou.png',
							'title':'跑腿代购'
						},
						{
							'img':'../../../static/insert/yexiao.png',
							'title':'夜宵'
						},
						{
							'img':'../../../static/insert/jintie.png',
							'title':'津贴联盟'
						},
						{
							'img':'../../../static/insert/yinpin.png',
							'title':'到点饮品'
						},
						{
							'img':'../../../static/insert/longxia.png',
							'title':'龙虾烧烤'
						},
						{
							'img':'../../../static/insert/dangao.png',
							'title':'甜蜜蛋糕'
						}
					],
					[
						{
							'img':'../../../static/insert/hanbao.png',
							'title':'汉堡披萨'
						},
						{
							'img':'../../../static/insert/liaoli.png',
							'title':'日韩料理'
						},
						{
							'img':'../../../static/insert/malatang.png',
							'title':'麻辣烫'
						},
						{
							'img':'../../../static/insert/jiancan.png',
							'title':'快食简餐'
						},
						{
							'img':'../../../static/insert/xianhua.png',
							'title':'浪漫鲜花'
						},
						{
							'img':'../../../static/insert/la.png',
							'title':'无辣不欢'
						},
						{
							'img':'../../../static/insert/jiaozi.png',
							'title':'饺子馆'
						},
						{
							'img':'../../../static/insert/xiaochi.png',
							'title':'小吃馆'
						},
						{
							'img':'../../../static/insert/baozaifan.png',
							'title':'煲仔饭'
						},
						{
							'img':'../../../static/insert/qita.png',
							'title':'其他'
						}
					]
				]
				
			}
		},
		methods:{
			// 滑块事件
			bannerfun(e){
				//console.log(e.detail.current)
				//console.log(this.lable.length)
				this.num=e.detail.current
			},
			// 到搜索页面 
			search(){
				wx.navigateTo({
					url:'../search/search'
				})
			},
		}
	}
</script>

<style scoped>
	/* 定位开始 */
	.search_view image{width: 50upx;height: 50upx;}
	.search_view{font-size: 30upx; font-weight: bold;display: flex;align-items: center;height: 80upx;}
	.search_text{padding: 0 10upx;}
	/* 定位结束 */
	/* 搜索开始 */
	.search_img{
		margin: auto 0 auto 20upx;
		width: 35upx;
		height: 35upx;
	}
	.search{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: flex;
		background: #eff3f4;
		border-radius: 10rpx;
	}
	.search input{
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 25upx;
		color: #666666;
	}
	.search_cont{
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
	}
	/* 搜索结束 */
	/* 轮播开始 */
	swiper{height: 320upx !important;}
   .swiper_item{
	   /* 使弹性项目在需要时换行 */
	   display: flex;
	   flex-wrap: wrap;
	   align-items: center;
	   justify-content: space-between;
	   height: 320upx;	   
   }
   .contenting_img{
	   width: calc((100% / 5)) !important;
	   position: relative;
	   text-align: center;
   }
   .contenting_img text{
	   padding-top: 20upx;
	   font-size: 25upx;
   }
   .uploadimg{
	   width: 70upx;
	   height: 70upx;
	   border-radius: 50upx;
	   display: block;
	   margin: 0 auto;
   }
	/* 轮播结束 */	
	/* 指示点开始 */
	.instruct_view{
		display: flex;
		justify-content: center;
		padding-top: 10upx;
	}
	.instruct{
		background: #e6e6e6;
		height: 10upx;
		width: 30upx;
		border-radius: 50upx;
		margin: 0 20upx;
	}
	.active{
		background: #fbae22 !important;
	}
	/* 指示点结束 */
</style>
